<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>index02</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="root" class="column">
    <div id="top" class="column">
        <p>top</p>
        <p>背景颜色：lightblue</p>
        <p>宽：100%</p>
        <p>高：100px</p>
        <p>下边距：10px</p>
    </div>
    <div class="row">
        <div id="left" class="column">
            <p>left</p>
            <p>宽：200px（左外边距5px）</p>
            <p>高；自适应内容（自行输入文字测试）</p>
            <p>高；自适应内容（自行输入文字测试）</p>
            <p>高；自适应内容（自行输入文字测试）</p>
            <p>高；自适应内容（自行输入文字测试）</p>
        </div>
        <div id="center" class="column">
            <p>center</p>
            <p>宽：自适应（保持在left和right之间并保持相邻外边距10px）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
            <p>高：在高度小于屏幕高度时自适应，超出屏幕高度时出现滑动条（自行输入文字测试）</p>
        </div>
        <div id="right" class="column">
            <p>right</p>
            <p>宽：300px</p>
            <p>高：300px，内容超出出现滚动条（自行输入文字测试）</p>
            <p>高：300px，内容超出出现滚动条（自行输入文字测试）</p>
            <p>高：300px，内容超出出现滚动条（自行输入文字测试）</p>
            <p>高：300px，内容超出出现滚动条（自行输入文字测试）</p>
            <p>高：300px，内容超出出现滚动条（自行输入文字测试）</p>
            <p>高：300px，内容超出出现滚动条（自行输入文字测试）</p>
            <p>高：300px，内容超出出现滚动条（自行输入文字测试）</p>
            <p>高：300px，内容超出出现滚动条（自行输入文字测试）</p>
            <p>高：300px，内容超出出现滚动条（自行输入文字测试）</p>
            <p>高：300px，内容超出出现滚动条（自行输入文字测试）</p>
            <p>高：300px，内容超出出现滚动条（自行输入文字测试）</p>
            <p>高：300px，内容超出出现滚动条（自行输入文字测试）</p>
            <p>高：300px，内容超出出现滚动条（自行输入文字测试）</p>
            <p>高：300px，内容超出出现滚动条（自行输入文字测试）</p>
            <p>高：300px，内容超出出现滚动条（自行输入文字测试）</p>
            <p>高：300px，内容超出出现滚动条（自行输入文字测试）</p>
            <p>高：300px，内容超出出现滚动条（自行输入文字测试）</p>
            <p>高：300px，内容超出出现滚动条（自行输入文字测试）</p>
            <p>高：300px，内容超出出现滚动条（自行输入文字测试）</p>
        </div>
    </div>
</div>
</body>
</html>